<template>
    <div class="user-form">
        <form @submit.prevent="saveUserInfo" class="user-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="firstName">First Name: <span>*</span></label>
                    <input type="text" v-model="user.firstName" id="firstName" placeholder="Enter First Name"
                        required />
                </div>
                <div class="form-group">
                    <label for="lastName">Last Name: <span>*</span></label>
                    <input type="text" v-model="user.lastName" id="lastName" placeholder="Enter Last Name" required />
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="password">Password: <span>*</span></label>
                    <input type="password" v-model="user.password" id="password" placeholder="Enter Password"
                        required />
                </div>
                <div class="form-group">
                    <label for="verifyPassword">Verify Password: <span>*</span></label>
                    <input type="password" v-model="verifyPassword" id="verifyPassword" placeholder="Verify Password"
                        required />
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="mobile">Mobile: <span>*</span></label>
                    <input type="tel" v-model="user.mobile" id="mobile" placeholder="Enter Mobile" required />
                </div>
                <div class="form-group">
                    <label for="email">Email: <span>*</span></label>
                    <input type="email" v-model="user.email" id="email" placeholder="Enter Email" required />
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="role">Role:</label>
                    <select v-model="user.role" id="role">
                        <option value="">Please Select</option>
                        <option v-for="role in roles" :key="role.value" :value="role.value">{{ role.text }}</option>
                    </select>
                </div>
                <div class="form-group is-admin">
                    <label>Is Admin:</label>
                    <div class="radio-group">
                        <label><input type="radio" v-model="user.isAdmin" :value="false" /> No</label>
                        <label><input type="radio" v-model="user.isAdmin" :value="true" /> Yes</label>
                    </div>
                </div>
            </div>

            <div class="form-group photo">
                <label for="photo">Photo:</label>
                <div class="upload-area" @click="triggerFileInput">
                    <span class="plus-icon">+</span>
                    <span v-if="user.photo" class="photo-name">{{ user.photo.name }}</span> <!-- 显示文件名 -->
                </div>
                <input type="file" id="photo" @change="handlePhotoUpload" ref="photoInput" accept="image/*" />
            </div>

            <div class="form-buttons">
                <button type="button" @click="$emit('cancel')">Cancel</button>
                <button type="submit">Add</button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    name: 'AddUserForm',
    data() {
        return {
            user: {
                firstName: '',
                lastName: '',
                password: '',
                mobile: '',
                email: '',
                role: '',
                isAdmin: false,
                company: '',
                preferredBusinessName: '',
                photo: null,
            },
            verifyPassword: '',
            roles: [
                { value: 'GCB Member', text: 'GCB Member' },
                { value: 'GBC Owner', text: 'GBC Owner' },
                { value: 'Share Leaders', text: 'Share Leaders' },
                { value: 'Marketing', text: 'Marketing' },
                { value: 'Bank', text: 'Bank' },
                { value: 'Investment Suite', text: 'Investment Suite' },
                { value: 'Interns', text: 'Interns' },
                { value: 'Inv Industrial', text: 'Inv Industrial' },
                { value: 'Inv Commercial', text: 'Inv Commercial' },
                { value: 'Inv Profitability', text: 'Inv Profitability' },
            ]
        };
    },
    methods: {
        saveUserInfo() {
            if (this.user.password !== this.verifyPassword) {
                alert('Passwords do not match');
                return;
            }
            if (this.user.firstName && this.user.lastName && this.user.password && this.user.mobile && this.user.email) {
                const newUser = { ...this.user };
                this.$emit('userAdded', newUser);
            } else {
                alert('Please fill out all required fields.');
            }
        },
        handlePhotoUpload(event) {
            const file = event.target.files[0];
            if (file) {
                this.user.photo = file;
            }
        },
        triggerFileInput() {
            this.$refs.photoInput.click();
        }
    }
};
</script>
<style scoped>
.user-form {
    padding: 30px;
    text-align: left;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: auto;
    font-size: 16px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    margin-right: 30px;
}

.form-group:last-child {
    margin-right: 0;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 18px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.photo {
    margin-top: 25px;
}

.upload-area {
    width: 100px;
    height: 100px;
    border: 2px dashed #42b983;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    margin-top: 10px;
    position: relative;
    transition: background-color 0.3s ease;
}

.upload-area:hover {
    background-color: #f0f0f0;
}

.plus-icon {
    font-size: 48px;
    color: #42b983;
}

.photo-name {
    position: absolute;
    bottom: 10px;
    font-size: 12px;
    color: #666;
}

input[type="file"] {
    display: none;
}

.is-admin .radio-group {
    display: flex;
    gap: 25px;
    align-items: center;
}

.is-admin label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

input[type="radio"] {
    margin: 0;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.form-buttons button {
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    background-color: #358d73;
    color: white;
    cursor: pointer;
}

.form-buttons button:hover {
    background-color: #42b983;
}

.form-buttons button[type="button"] {
    background-color: #ccc;
}

.form-buttons button[type="button"]:hover {
    background-color: #999;
}

span {
    color: red;
    font-size: 16px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="gray" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    box-sizing: border-box;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #42b983;
}

select::-ms-expand {
    display: none;
}
</style>